<template>
  <div class="search_input flex-middle">
    <van-icon name="search" size=".48rem" />
    <input
      type="search"
      @keyup.enter="handleEnter"
      :value="value"
      @input="handleInput"
      class="flex1"
      :placeholder="placeholder"
    />
  </div>
</template>

<script>
export default {
  props: {
    value: String,
    placeholder: String
  },
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value);
    },
    handleEnter(e) {
      this.$emit("enter", this.value);
    }
  }
};
</script>

<style lang="scss" scoped>
.search_input {
  width: 100%;
  padding: 0 15px;
  height: 35px;
  border-radius: 18px;
  background: $inputBg;
  input {
    background: $inputBg;
    margin-left: 5px;
    border: none;
    outline: none;
    &::placeholder {
      color: $placeHolderColor;
    }
  }
}
</style>